<template>
  <div class="main_box" style="padding:10px">
    <div class="add_wrap">
      <div class="tit">
        <h2>{{dataForm.programId?'编辑应用':'新增应用'}}</h2>
        <el-button type="success" plain size="small" icon="fa fa-mail-forward" @click="returnList">返回</el-button>
      </div>
      <el-form :model="dataForm" ref="dataForm" label-width="200px" :rules="roleRules">
        <el-row>
          <el-form-item prop="name" label="应用名称" >
            <el-input type="text" v-model="dataForm.name" clearable placeholder="请输入租户名称"></el-input>
          </el-form-item>
          <el-form-item prop="programType" label="应用类型">
            <el-select v-model="dataForm.programType" placeholder="请选择应用类型">
              <el-option v-for="item in programTypeList" :value="item.id" :label="item.name" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="appId" label="应用ID">
            <el-input type="text" v-model="dataForm.appId" placeholder="请输入应用ID"></el-input>
          </el-form-item>
          <el-form-item prop="appSecret" label="应用密钥">
            <el-input type="text" v-model="dataForm.appSecret" placeholder="请输入应用密钥"></el-input>
          </el-form-item>
          <el-form-item prop="relationTenantId" label="租户">
            <el-select v-model="dataForm.relationTenantId">
              <el-option v-for="item in tenantList" :label="item.name" :value="item.value" :key="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="introduce" label="应用介绍">
            <el-input type="textarea" v-model="dataForm.introduce"></el-input>
          </el-form-item>
          <el-form-item prop="remark" label="备注">
            <el-input type="textarea" v-model="dataForm.remark"></el-input>
          </el-form-item>
          <el-form-item prop="logo" label="应用logo">
            <UploadImg folder="program" @uploadFileList="getFileUrl">
              <img v-if="dataForm.logo" width="100%" :src="dataForm.logo" alt="">
            </UploadImg>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item>
            <el-button plain type="primary" @click="sureClick">保 存</el-button>
            <el-button plain @click="returnList">取 消</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
  import * as message from "@/constants/message";
  import ProgramApi from '@/api/system/program';
  import UploadImg from "@/components/UploadImg.vue";
  import TenantApi from "@/api/system/tenant";
  export default {
    data() {
      return {
        dataForm: {
          programId:"",
          name:"",
          logo:"",
          appSecret:"",
          appId: "",
          programType:"",
          introduce:"",
          relationTenantId:"",
          remark:"",
        },
        programTypeList:[
          {id:1,name:"用户小程序"},
          {id:2,name:"商户小程序"},
          {id:10,name:"APP"}
        ],
        tenantList:[],
        roleRules: {
          name: [
            {required: true, message: "请输入应用名称", trigger: "focus"}
          ],
          /*appId:[
            {required:true,message:"请输入应用ID",trigger:"focus"}
          ],
          appSecret:[
            {required:true,message:"请输入应用密钥",trigger:"focus"}
          ],*/
          programType: [
            {required: true, message: "请选择应用类型", trigger: "change"}
          ],
          relationTenantId: [
            {required: true, message: "请选择租户", trigger: "change"}
          ]
        }
      }
    },
    components: {
      UploadImg
    },
    mounted() {
      this.init()
    },
    methods: {
      init() {
        this.getTenantList()
        if (this.$route.query.id) {
          this.dataForm.id = this.$route.query.id
          this.getData()
        }
      },
      keydown(e) {
        if (e.keyCode === 32) {
          e.returnValue = false;
        }
      },
      getData() {
        ProgramApi.getProgram({
          id: this.dataForm.id
        }).then(res => {
          this.$Utils.bindingBean(this.dataForm, res.data)
        })
      },
      // 获取租户列表
      async getTenantList(){
        const {data} = await TenantApi.listIdName()
        this.tenantList = data||[]
      },
      getFileUrl(val){
        this.dataForm.logo = val[0]
      },
      sureClick() {
        this.$refs.dataForm.validate(valid => {
          if (valid) {
            this.$confirm(message.MSG_CONFIRM_SAVE_ALTER, message.TITLE_PROMPT, {})
              .then(() => {
                if (this.dataForm.programId) {
                  this.editData();
                } else {
                  this.addData();
                }
              });
          }
        })
      },
      addData() {
        let param = {
          name: this.dataForm.name,
          logo: this.dataForm.logo,
          appId:this.dataForm.appId,
          appSecret:this.dataForm.appSecret,
          programType:this.dataForm.programType,
          introduce:this.dataForm.introduce,
          relationTenantId:this.dataForm.relationTenantId,
          remark: this.dataForm.remark
        };
        ProgramApi.addProgram(param).then(res => {
          this.$Utils.notifySuccess()
          this.returnList();
        })
      },
      editData() {
        let param = {
          programId:this.dataForm.programId,
          logo: this.dataForm.logo,
          name: this.dataForm.name,
          appId:this.dataForm.appId,
          appSecret:this.dataForm.appSecret,
          programType:this.dataForm.programType,
          relationTenantId:this.dataForm.relationTenantId,
          introduce:this.dataForm.introduce,
          remark: this.dataForm.remark
        };
        ProgramApi.editProgram(param)
          .then(data => {
            this.$Utils.notifySuccess()
            this.returnList();
          })
      },
      returnList() {
        this.$store.dispatch('delView', this.$route);
        this.$router.push({path: '/organ/programManagement'});
      }
    },

  }
</script>
<style lang="scss" scoped>
@import "@/assets/css/views/add.scss";
</style>

<style lang="scss" scoped>
  .upload-img {
    &::v-deep .el-upload-dragger {
      display: flex;
      justify-content: space-around;
      align-items: center;

      .tip {
        padding-bottom: 30px;
      }
    }
  }
</style>

